<template>
  <div class="main">
    <!--面包屑-->
    <div class="top">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>项目群</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>区域列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <el-card class="card">
        <!--标题文字-->
        <div class="headerTitle">
          <div>区域列表</div>
        </div>

        <div class="search">
          <el-input
            v-model="input"
            placeholder="请输入区域名称搜索"
            :suffix-icon="Search"
            style="width: 300px"
            @keyup.enter="getRegionList"
          />
          <el-button class="addbtn" @click="handleAdd">新建区域</el-button>
        </div>

        <div class="table" style="padding: 0 20px">
          <el-table
            :data="tableData"
            :row-style="{ height: '56px' }"
            border
            :height="600"
            :header-cell-style="{
              background: '#b4c7e7',
              color: 'black',
              fontSize: '12px',
              fontWeight: '500',
            }"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="regionName"
              label="区域名称"
              align="center"
              width="350px"
            />

            <el-table-column
              prop="distance"
              label="离地距离"
              align="center"
              width="370px"
            />

            <el-table-column
              prop="img"
              label="区域图片"
              align="center"
              width="500px"
            >
              <template v-slot="scope">
                <img
                  style="height: 35px; width: 40px"
                  class="imgi"
                  :src=" scope.row.img"
                  alt=""
                  v-if="scope.row.img !== null"
                />
                <img src="" alt="" v-else />
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template v-slot="scope">
                <span class="edit" @click="handleEdit(scope.row)">编辑</span>
                <span class="dell" @click="handleDell(scope.row.id)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增 -->
        <div>
          <el-dialog v-model="addVisible" title="新建区域" width="30%">
            <el-divider class="line" />
            <el-form>
              <el-form-item label="区域名称" class="lineheight">
                <el-input v-model="form.regionName" placeholder="区域名称" />
              </el-form-item>
              <el-form-item label="离地距离" class="lineheight">
                <el-input v-model="form.distance" placeholder="离地距离" />
              </el-form-item>
              <el-form-item label="区域图片" class="lineheight">
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://47.94.22.162:3085/OaDeviceController/uploads"
                  :on-success="backImg"
                  ref="imgi"
                  :limit="2"
                  :on-remove="handleRemove"
                  :on-change="cg"
                  :show-file-list="true"
                >
                  <div class="upload">
                    <el-button icon="Upload">上传图片</el-button>
                  </div>
                </el-upload>
              </el-form-item>
              <el-divider class="ment" />
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addVisible = false" class="cancle"
                  >取消</el-button
                >
                <el-button type="primary" class="save" @click="addBtns"
                  >保存</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>

        <!-- 修改 -->
        <div>
          <el-dialog v-model="editVisible" title="编辑区域" width="30%">
            <el-divider class="line" />

            <el-form>
              <el-form-item label="区域名称" class="lineheight">
                <el-input v-model="upform.regionName" placeholder="区域名称" />
              </el-form-item>
              <el-form-item label="离地距离" class="lineheight">
                <el-input v-model="upform.distance" placeholder="离地距离" />
              </el-form-item>
              <el-form-item label="区域图片" class="lineheight">
                <el-image
                  w-full
                  style="width: 50px; height: 50px"
                  :src="upform.img"
                  :preview-src-list="evaluatePictureList"
                  @click="clickevaluatePicture(scope.row)"
                  v-if="upform.img !== null"
                >
                </el-image>
                <el-img w-full src="" alt="" v-else> </el-img>
                <el-icon v-if="upform.img" class="delicon" @click="delImage"
                  ><Close
                /></el-icon>
              </el-form-item>
              <el-form-item label="上传修改图片" class="lineheight">
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="http://47.94.22.162:3085/OaDeviceController/uploads"
                  :on-success="editImg"
                  ref="imgi"
                  :limit="2"
                  :on-remove="handleRemove"
                  :on-change="cg"
                  :show-file-list="true"
                >
                  <div class="upload">
                    <el-button icon="Upload">上传图片</el-button>
                  </div>
                </el-upload>
              </el-form-item>
              <el-divider class="ment" />
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="editVisible = false" class="cancle"
                  >取消</el-button
                >
                <el-button type="primary" @click="editBtn" class="save"
                  >保存</el-button
                >
              </span>
            </template>
          </el-dialog>
        </div>

        <div class="page">
          <el-pagination
            v-model:currentPage="currentPage"
            layout="prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  RegionDelete,
  RegionList,
  RegionAdd,
  RegionEdit,
} from "../../../api/model/areaList";
import { ElMessage } from "element-plus";

let imgi = ref("");
const input = ref("");
const fileList = ref([]);
const currentPage = ref(1);
const total = ref(0);

const addVisible = ref(false);

const editVisible = ref(false);

const tableData = ref([]);
watch(
  () => currentPage.value,
  () => {
    getRegionList();
  }
);
const editBtn = async () => {
  editVisible.value = false;
  await RegionEdit(upform);
  await getRegionList();
};
// 添加form
const form = reactive({
  regionName: "",
  distance: "",
  img: "",
});

// 修改form
const upform = reactive({
  regionName: "",
  distance: "",
  img: "",
  id: "",
});

const backImg = (e) => {
  form.img = e.date.url;
  ElMessage.success("图片上传成功");
  fileList.value.push({
    name: e.data.split("/").at(-1),
    url:  e.date.url,
  });
};
//图片删除功能
const handleRemove = () => {
  fileList.value = [];
};
const cg = (f, files) => {
  if (files) {
    fileList.value = files.slice(-1);
  }
};
const editImg = (e) => {
  upform.img = e.date.url;
};
// 斑马纹表格
const tableRowClassName = ({ row, rowIndex }) => {
  console.log(row);
  if (rowIndex % 2 == 0) {
    return "warning-row";
  } else {
    return "success-row";
  }
};
// 新增按钮
const addBtns = async () => {
  addVisible.value = false;

  await RegionAdd(form);
  form.regionName = "";
  form.distance = "";
  form.img = "";
  getRegionList();
  this.$ref["imgi"].clearFiles();
};

// 获取区域列表
const getRegionList = async () => {
  let res = await RegionList({ regionName:input.value,page: currentPage.value });
  console.log("区域数据", res.data.data);
  tableData.value = res.data.data.list;
  total.value = res.data.data.total;
};
onMounted(() => {
  getRegionList();
});
// 添加
const handleAdd = () => {
  addVisible.value = true;
};
// 删除图片功能
const delImage = () => {
  upform.img = "";
};
const handleDell = async (e) => {
  console.log(e);
  await RegionDelete({ ids: e });
  await getRegionList();
};
//编辑功能
const handleEdit = (e) => {
  console.log("编辑数据", e.img);
  editVisible.value = true;
  upform.regionName = e.regionName;
  upform.distance = e.distance;
  upform.img = e.img;
  upform.id = e.id;
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #eaf2fa;
  overflow: hidden;
}
.imgi {
  width: 10%;
}
.top {
  margin-left: 30px;
  margin-top: 5px;
}

.card {
  width: 100%;
  // height: 550px;
  margin-top: 15px;
}
.card :deep(.el-card__body) {
  padding: 0 !important;
  height: 780px;
}

:deep(.el-form-item__label) {
  white-space: pre-line;
}

.edit {
  margin-right: 30px;
  font-size: 13px;
  color: #606fa6;
  cursor: pointer;
}

.dell {
  font-size: 13px;
  color: #fccb56;
  cursor: pointer;
}
/deep/.warning-row {
  background: #fff;
}
/deep/.success-row {
  background: #f5f7fa;
}
.search {
  display: flex;
  padding: 0 20px;
  justify-content: flex-end;
  margin-top: 20px;
}

.addbtn {
  width: 100px;
  height: 30px;
  color: white;
  background-color: #8faadc;
  margin-left: 20px;
}

.table {
  margin-top: 15px;
  height: 600px;
}

.el-dialog__title {
  color: #636ea6;
  letter-spacing: 1px;
}

.line {
  position: absolute;
  top: 40px;
  left: 0px;
}

.el-form-item__label {
  white-space: pre-line;
}

.ment {
  position: absolute;
  top: 320px;
  left: 0px;
}

.lineheight {
  height: 40px;
}

.page {
  margin-left: 950px;
  margin-top: 10px;
}

:deep(.el-dialog__title) {
  color: #7b6ea5;
  letter-spacing: 1px;
}

.cancle {
  background-color: #cccccc;
  color: white;
  width: 100px;
}

.save {
  background-color: #8faadc;
  color: white;
  width: 100px;
}
.delicon {
  position: absolute;
  top: 0;
  margin-left: 38px;
  color: white;
  font-weight: bold;
}
</style>
